<template>
  <div>
    <div class="ans-h layui-nav" ans_g id="my_ques_g">
      <a v-for="(item, index) in categoryArr" href="javascript:void(0)"
        @click="selectThis(index)" class="layui-nav-item"
        :class="{'layui-this':currentCategoryIndex === index}"
        :key="index">{{item}}</a>
    </div>
    <div id="my_ques" v-if="anwserListDataArr.length > 0">
      <!-- 全部 -->
      <div v-for="(item, index) in categoryArr"  v-show="currentCategoryIndex === index" :key="index">
        <QaItem :key="index" :list="anwserListDataArr[currentCategoryIndex].list"/>
        <button v-if="anwserListDataArr[currentCategoryIndex].total > anwserListDataArr[currentCategoryIndex].list.length"
            class="load-more ftz16"
            @click="loadMore">
            <template v-if="anwserListDataArr[currentCategoryIndex].isLoadingMore">
              <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
              <span>正在加载，请稍候......</span>
            </template>
            <span v-else>点击加载更多...</span>
          </button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  getRaiseQuestion
} from '@/service/api'
import QaItem from '@/components/dashboardUser/qa-item'
export default {
  data () {
    return {
      anwserListDataArr: [],
      searchDataArr: [],
      categoryArr: ['全部', '待回答', '已回答'],
      currentCategoryIndex: 0
    }
  },
  components: {
    QaItem
  },
  mounted () {
    this.$nextTick(() => {
      if (window.layer) {
        this.showLoadingModal()
      }
      this.initAnwserListDataArr()
      this.initData()
    })
  },
  methods: {
    showLoadingModal () {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    },
    closeLoadingModal () {
      window.layer.close(this.layerLoad)
    },
    initData () {
      this.getMyRaiseQuestionList().then((res) => {
        if (res.status === 200) {
          this.anwserListDataArr[this.currentCategoryIndex].list = res.data.list
          this.anwserListDataArr[this.currentCategoryIndex].total = res.data.total
          this.anwserListDataArr[this.currentCategoryIndex].loaded = true // 数据已经请求过
          this.closeLoadingModal()
        }
      })
    },
    selectThis (index) {
      this.currentCategoryIndex = index
      if (!this.anwserListDataArr[this.currentCategoryIndex].loaded) {
        this.showLoadingModal()
        this.initData()
      }
    },
    /*
     * status 值如下
     *  DELETED("-1","已删除"),
        NOT_PAID("0","未支付"),
        VERITING("3","待审核"),
        VERITY_FAILD("5","审核失败"),
        WAITING_ANSWER("10","待回答"),
        ANSWERED("20","已回答"),
        EXPIRED("30","已失效")
    */
    initAnwserListDataArr () {
      for (let i = 0; i < this.categoryArr.length; i++) {
        let searchObj = {
          pageSize: 6,
          pageNum: 1,
          status: ['', '10', '20'][i]
        }
        // 查询全部是多一个参数
        this.searchDataArr.push(searchObj)
        this.anwserListDataArr.push({
          key: i,
          total: 0,
          list: [],
          isLoadingMore: false,
          loaded: false
        })
      }
    },
    // 我的提问题列表
    async getMyRaiseQuestionList () {
      let searchData = this.searchDataArr[this.currentCategoryIndex]
      let res = await getRaiseQuestion(searchData)
      return res
    },
    loadMore () {
      let index = this.currentCategoryIndex
      this.anwserListDataArr[index].isLoadingMore = true
      this.searchDataArr[index].pageNum++
      this.getMyRaiseQuestionList().then((res) => {
        this.anwserListDataArr[index].isLoadingMore = false
        if (res.status === 200) {
          this.anwserListDataArr[this.currentCategoryIndex].list.push(...res.data.list)
        } else {
          this.searchDataArr[index].pageNum.pageNum--
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.load-more{
    display: block;
    width: 94%;
    height: 38px;
    border: 1px solid #e6e6e6;
    color: #808080;
    border-radius: 5px;
    background: #fff;
    margin: 20px auto;
}
</style>
